import React from 'react';
import { useState } from 'react'
import { BrowserRouter as Router, Route, Routes, useNavigate, useLocation } from 'react-router-dom';
import { CloseSmall, Minus, SquareSmall, Home, Music, Video, ImageFiles, Setting, ApplicationMenu, MenuUnfold, MenuFold } from '@icon-park/react';
import HomeView from './views/HomeView';
import MusicView from './views/MusicView';
import VideoView from './views/VideoView';
import PictureView from './views/PictureView';
import SettingsView from './views/SettingsView';
import './App.css'
import logo from './assets/logo.png';

// 简单的图标组件
const Icon = ({ name }: { name: string }) => {
  // 使用 icon-park 图标组件
  const iconComponents: Record<string, React.ReactNode> = {
    logo: <div><img src={logo} width={24} alt="logo" /></div>,
    menu: <ApplicationMenu theme="outline" size="24" />,
    menuUnfold: <MenuUnfold theme="outline" size="24" />,
    menuFold: <MenuFold theme="outline" size="24" />,
    home: <Home theme="outline" size="24" />,
    music: <Music theme="outline" size="24" />,
    video: <Video theme="outline" size="24" />,
    image: <ImageFiles theme="outline" size="24" />,
    settings: <Setting theme="outline" size="24" />
  };

  // 如果找不到对应的图标，返回默认图标
  return iconComponents[name] || <Home theme="outline" size="24" />;
};

// 窗口按钮组件
const WindowButton = ({ type }: { type: 'min' | 'max' | 'close' }) => {
  const [isHovered, setIsHovered] = useState(false);
  const colors: Record<string, string> = {
    min: '#FFBD2E',
    max: '#27C346',
    close: '#FF5F56'
  };

  // 根据悬停状态和按钮类型确定填充颜色
  const getFillColor = () => {
    if (type === 'close' && isHovered) {
      return '#fff';
    }
    return '#333';
  };

  return (
    <button
      className="window-button"
      style={{ color: colors[type] }}
      aria-label={type}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {type === 'min' && <Minus theme="outline" size="20" fill={getFillColor()} strokeWidth={1} />}
      {type === 'max' && <SquareSmall theme="outline" size="20" fill={getFillColor()} strokeWidth={1} />}
      {type === 'close' && <CloseSmall theme="outline" size="24" fill={getFillColor()} strokeWidth={1} />}
    </button>
  );
};

// 侧边栏项组件
const SidebarItem = ({ icon, onClick, label, isActive }: { icon: string; onClick: () => void; label?: string; isActive?: boolean }) => {
  return (
    <div className={`sidebar-item ${isActive ? 'active' : ''}`} onClick={onClick} title={label}>
      <Icon name={icon} />
      {label && <span className="sidebar-item-label">{label}</span>}
    </div>
  );
};

// 主应用组件
function App() {
  const navigate = useNavigate();
  const location = useLocation();
  const [isMenuExpanded, setIsMenuExpanded] = useState(false);

  // 处理侧边栏项点击
  const handleSidebarItemClick = (path: string) => {
    navigate(path);
  };

  // 切换菜单展开状态
  const toggleMenu = () => {
    setIsMenuExpanded(!isMenuExpanded);
  };

  // 根据当前路径确定激活的菜单项
  const getActiveMenu = () => {
    switch (location.pathname) {
      case '/home':
        return 'home';
      case '/music':
        return 'music';
      case '/video':
        return 'video';
      case '/picture':
        return 'image';
      case '/settings':
        return 'settings';
      default:
        return 'home';
    }
  };

  const activeMenu = getActiveMenu();

  return (
    <div className="window-container">
      {/* 标题栏 */}
      <div className="title-bar">
        <div className="title-bar-left">
          <Icon name="logo" />
          <span className="window-title">React-Widgets-Template</span>
        </div>
        <div className="title-bar-right">
          <WindowButton type="min" />
          <WindowButton type="max" />
          <WindowButton type="close" />
        </div>
      </div>

      {/* 主内容区 */}
      <div className="main-content">
        {/* 侧边栏 */}
        <div className={`sidebar ${isMenuExpanded ? 'expanded' : ''}`}>
          <SidebarItem 
            icon={isMenuExpanded ? "menuFold" : "menuUnfold"} 
            onClick={toggleMenu}
            label={isMenuExpanded ? "收起菜单" : "展开菜单"}
          />
          <div className="sidebar-items">
            <SidebarItem 
              icon="home" 
              onClick={() => handleSidebarItemClick('/home')} 
              label="主页"
              isActive={activeMenu === 'home'}
            />
            <SidebarItem  
              icon="music" 
              onClick={() => handleSidebarItemClick('/music')} 
              label="音乐"
              isActive={activeMenu === 'music'}
            />
            <SidebarItem 
              icon="video" 
              onClick={() => handleSidebarItemClick('/video')} 
              label="视频"
              isActive={activeMenu === 'video'}
            />
            <SidebarItem 
              icon="image" 
              onClick={() => handleSidebarItemClick('/picture')} 
              label="图片"
              isActive={activeMenu === 'image'}
            />
            <SidebarItem 
              icon="settings" 
              onClick={() => handleSidebarItemClick('/settings')} 
              label="设置"
              isActive={activeMenu === 'settings'}
            />
          </div>
        </div>

        {/* 内容区域 */}
        <div className="content-area">
          <Routes>
            <Route path="/home" element={<HomeView />} />
            <Route path="/music" element={<MusicView />} />
            <Route path="/video" element={<VideoView />} />
            <Route path="/picture" element={<PictureView />} />
            <Route path="/settings" element={<SettingsView />} />
            <Route path="*" element={<HomeView />} />
          </Routes>
        </div>
      </div>
    </div>
  );
}

// 包装路由组件
const AppWithRouter = () => (
  <Router>
    <App />
  </Router>
);

export default AppWithRouter;
